import { SetupContext, computed,Ref } from 'vue';
import { ExtendPanelPropsType } from '../extend-panel.props';
import { UseClassName } from './types';
export function useClassName(
    props: ExtendPanelPropsType,
    context: SetupContext,
    checked:Ref
): UseClassName {
    const startTransitionClassName = computed(() => {
        let classlist = ['f-extend-panel'];
        if (checked.value || checked.value === 0) {
            classlist.push('f-extend-panel-start')
        }
        return classlist.join(' ')
    })
    const checkedClassName = (key: number) => {
        let className = 'f-extend-panel-layout-item';
        if (key === checked.value) {
            className += ' f-extend-panel-layout-item-checked'
        }
        return className;
    }
    return {
        startTransitionClassName,
        checkedClassName
    }
}